<script setup lang="ts">

import {ref} from "vue";

const chat = ref<number>()

function clickChat(id: number) {
  if (chat.value){
    let old_main_content = document.getElementById(`main-content-${chat.value}`) as HTMLElement;
    old_main_content.style.background = '#dcdcdd'
  }
  chat.value = id
  let new_main_content = document.getElementById(`main-content-${id}`) as HTMLElement;
  new_main_content.style.background = '#c7c6c5'
}


</script>

<template>
  <div class="aside">
    <el-main class="aside-main border">
      <el-scrollbar>
        <div @click="clickChat(i)" v-for="i in 50" class="main-content" :id="`main-content-${i}`">
          <div class="main-content-img"></div>
          <div class="main-content-text">
            <div class="main-content-text-name">大哥</div>
            <div class="main-content-text-content">不要</div>
          </div>
          <div class="main-content-time">19:45</div>
        </div>
      </el-scrollbar>
    </el-main>
  </div>
</template>

<style scoped>

.aside{
  width: 200px;
}

.aside .aside-main {
  background: #eae8e7;
  height: calc(100vh - 60px);
}

.aside .aside-main .main-content{
  background: #dcdcdd;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
}

.aside .aside-main .main-content:active{
  background: #c7c6c5;
}

.aside .aside-main .main-content .main-content-img{
  width: 40px;
  height: 40px;
  background: #ffffff;
  margin-left: 12px;
}

.aside .aside-main .main-content .main-content-text{
  margin-left: 10px;
}

.aside .aside-main .main-content .main-content-text-name{
  font-size: 15px;
}

.aside .aside-main .main-content .main-content-text-content{
  font-size: 12px;
  color: #666666;
  margin-top: 6px;
}

.aside .aside-main .main-content .main-content-time{
  height: 40px;
  font-size: 12px;
  color: rgba(102, 102, 102, 0.62);
  margin-left: auto;
  margin-right: 12px;
}

</style>